<template>
  <div>
    <detail-banner
    :sightName="sightName"
    :bannerImg="bannerImg"
    :bannerImgs="gallaryImgs"></detail-banner>
    <detail-header></detail-header>
    <detail-list 
      :list="list"
      :foodList="foodList"></detail-list>
    <detail-bottom></detail-bottom>
  </div>
</template>

<script>
import DetailBanner from "./components/Banner";
import DetailHeader from "./components/Header";
import DetailList from "./components/List";
import DetailBottom from "./components/Bottom";
import axios from 'axios'
export default {
  name: "Detail",
  components: {
    DetailBanner,
    DetailHeader,
    DetailList,
    DetailBottom
  },
  data() {
    return {
      sightName:'',
      bannerImg:'',
      gallaryImgs:[],
      list: [],
      foodList: [],
    }
  },
  methods:{
      getDetailInfo(){
          axios.get('/api/detail.json',{
              params:{
                  id:this.$route.params.id
              }
          }).then(this.handleGetDataSucc)
      },
      handleGetDataSucc(res){
          res=res.data
          if(res.ret&&res.data){
              const data=res.data
              this.sightName=data.sightName
              this.bannerImg=data.bannerImg
              this.gallaryImgs=data.gallaryImgs
              this.list=data.categoryList
              this.foodList=data.foodList
          }
      }
  },
  mounted (){
      this.getDetailInfo()
      console.log(this.sightName)
  }
}
</script>

<style lang="stylus" scoped>

</style>
